<template>
  <view class="all-evaluation">
    <view class="evaluation-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabList" :key="idx" @click="handleChangeTabs(idx)">{{item}}</view>
    </view>
    <view class="card" v-if="commentList.length">
      <SinyuEvaluation :list="commentList" @onMore="handleMoreComment()"></SinyuEvaluation>
    </view>
    <view class="var-empty" v-else>暂无评论</view>
  </view>
</template>

<script>
  import SinyuEvaluation from '@/components/SinyuEvaluation.vue';
  export default {
    components:{SinyuEvaluation},
    data() {
      return {
        curTabs:0,
        tabList:[],
        params:{
          page:1,
          pageSize:10
        },
        commentList:[],
        moreStatus:'more'
      };
    },
    onReachBottom() {
      if(this.params.total > this.commentList.length){
        ++this.params.page;
        this._getCommentList()
      }else{
        this.moreStatus="no-more"
      }
    },
    onLoad(ops) {
      this.params = {
        ...this.params,
        appId:ops.appId,
        topicId:ops.topicId
      }
      this.$get('/social/yahe/comment/getCommentCount',{
        appId:ops.appId,
        topicId:ops.topicId
      }).then(res=>{
        const {content} = res
        this.tabList = [
          `全部(${content.allCommentCount})`,
          `好评(${content.goodCommentCount})`,
          `差评(${content.badCommentCount})`
        ]
        this._getCommentList()
      })
    },
    methods:{
      handleChangeTabs(idx){
        this.curTabs = idx
        this.params.page = 1
        this.commentList = []
        this._getCommentList({
          level:idx
        })
      },
      ///   network
      _getCommentList(value){
        const data = {
          ...this.params,
          ...value
        }
        if(data.level<1){
          delete data.level
        };
        uni.showLoading({
          title:'加载中...'
        })
        this.$get('/social/yahe/comment/pageList',data,'1').then(res=>{
          if(res.code == '1'){
            this.params.total = res.content.pagination.totalCount
            this.commentList = [...this.commentList,...res.content.list]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.all-evaluation{
  
  .evaluation-tabs{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    background: var(--page-bg);
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// evaluation-tabs end
  
  .card{
    padding: 24rpx;
  }
}
</style>
